<template>
  <a-modal
    :width="500"
    :visible="visible"
    title="移动分组"
    @cancel="onClose"
    @ok="onSubmit"
    ok-text="确定"
    :destroyOnClose="true"
    :confirmLoading="loading"
  >
    <div class="group-box">
      <a-list
        :data-source="groupList"
        :split="false"
        :loading="groupLoading"
        class="view-list-one"
      >
        <template #renderItem="{ item }">
          <a-list-item class="group-item" :class="item.id == selectGroupId ? 'active' : ''" @click.stop="changeCurrentGroup(item.id)">
            <div class="item-box">
              <div class="item-title">{{item.name}}</div>
              <CheckOutlined v-if="item.id == selectGroupId" style="color: #2681f3"/>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-modal>

</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch, nextTick } from "vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import {CheckOutlined} from "@ant-design/icons-vue";

export default defineComponent({
  name: "MoveTags",
  props: {
    currentGroupId: {
      type: [Number, String],
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    tagIds: {
      type: Array,
      default: () => [],
    }
  },
  components: {CheckOutlined},
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      groupList: [],
      groupLoading: false,
      selectGroupId: 0,
    });


    const onSubmit = () => {
      if (state.selectGroupId == props.currentGroupId) {
        message.warning('选择的标签已经在这个分组了~');
        return;
      }
      state.loading = true;
      request
        .post("/org", "/business/moveTagGroup", {pid: state.selectGroupId, tagIds: props.tagIds})
        .then((res) => {
          message.success(res?.msg || '移动成功');
          emit("success");
        }).finally(() => {
        state.loading = false;
      })
    };

    const changeCurrentGroup = (id) => {
      state.selectGroupId = id;
    };

    const onClose = () => {
      emit("handleCancel");
    };

    const getGroupList = () => {
      state.groupLoading = true;
      return new Promise((resolve) => {
        request
          .get("/org", "/business/customerGroupTag", {})
          .then((res) => {
            state.groupList = res?.list || [];
            resolve();
          })
          .finally(() => {
            state.groupLoading = false;
          });
      });
    };

    const init = () => {
      getGroupList().then(() => {
        state.selectGroupId = props.currentGroupId;
      })
    };

    const reset = () => {
      state.loading = false;
      state.selectGroupId = 0;
      state.groupList = [];
      state.groupLoading = false;
    };


    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      changeCurrentGroup,
    };
  },
});
</script>

<style lang="less" scoped>
p {
  &:last-of-type {
    margin-bottom: 0;
  }
}
.user-tag :deep(.ant-tag) {
  border-radius: 20px !important;
  padding: 0 12px 0 0 !important;
  background: #f1f1f1;
  border: none;
}

.group-box {
  max-height: 600px;
  width: 100%;
}
.group-item {
  border-bottom: 1px dashed #d9d9d9;
  cursor: pointer;
  &:hover {
    color: @primary-color;
  }
}
.active {
  color: @primary-color;
}
.item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .item-title {
    flex: 1;
  }
}
</style>
